<script lang="ts" setup>
import { computed, defineProps} from 'vue'
import type { DocForm } from '@/types/workflow';
import { useRouter } from 'vue-router';


import iconAskLeave from '@/assets/images/icon_askleave.png'
import iconReport from '@/assets/images/icon_report.png'
import iconSend from '@/assets/images/icon_send.png'
import iconSeal from '@/assets/images/icon_seal.png'
import iocnReceive from '@/assets/images/icon_receive.png'
import iocnRepresent from '@/assets/images/icon_represent.png'


const router = useRouter();

interface UserTaskItemProps {
    docForm:DocForm
}

const {docForm} = defineProps<UserTaskItemProps>();

const handleItemClick = ()=>{

    const workflowId = docForm.workflowId;
    if(workflowId == 1){
        router.push('/form/sendFile?fid='+docForm.id)
    }
    if(workflowId == 2){
        router.push('/form/receiveFile?fid='+docForm.id)
    }
    if(workflowId == 3){
        router.push('/form/reportFile?fid='+docForm.id)
    }
    if(workflowId == 4){
        router.push('/form/sendFile?fid='+docForm.id)
    }
    if(workflowId == 5){
        router.push('/form/askLeave?fid='+docForm.id)
    }
    if(workflowId == 6){
        router.push('/form/sealApply?fid='+docForm.id)
    }
    if(workflowId == 7){
        router.push('/form/represent?fid='+docForm.id)
    }
 
}


const docType = computed(()=>{
    var msg = '公文';

    if(docForm.workflowId == 1) msg = '发文'
    if(docForm.workflowId == 2 ) msg = '收文'
    if(docForm.workflowId == 3 ) msg = '签呈'
    if(docForm.workflowId == 5 ) msg = '请假'
    if(docForm.workflowId == 6 ) msg = '用印'
    if(docForm.workflowId == 7 ) msg = '提案'

    return msg;
})

const docTypeImg = computed(()=>{

    if(docForm.workflowId == 1) return iconSend;
    if(docForm.workflowId == 2) return iocnReceive;
    if(docForm.workflowId == 3) return iconReport;
    if(docForm.workflowId == 5) return iconAskLeave;
    if(docForm.workflowId == 6) return iconSeal;
    if(docForm.workflowId == 7) return iocnRepresent;
 
})

</script>
<template>
    <div class="taskItem" @click="handleItemClick">
        <div data-v-5c491c41="" class="item_title">
            <img :src="docTypeImg" class="iconState"/>
            <div  class="title">
                {{ docForm.title }}
            </div>
         
        </div>


        <div class="items">
            <div class="itemsLeft">

                <div data-v-5c491c41="" class="item_info">
                    <p data-v-5c491c41="" class="user">
                        <van-icon name="play-circle" color="#525252"/>
                        公文状态：{{ docForm.status}}</p>
                </div>

                <div data-v-5c491c41="" class="item_info">
                    
                    <p data-v-5c491c41="" class="user">
                        <van-icon name="contact" color="#525252"/>
                        发送者：{{ docForm.lastOperator }}</p>
                    
                </div>
                <div data-v-5c491c41="" class="item_info">
                    
                    <p data-v-5c491c41="" class="user">
                        <van-icon name="todo-list" color="#525252" />                
                        发起日期：{{ docForm.createTime}}                
                    </p>
                </div>
            </div>       
        </div>
    </div>
</template>

<style lang="less" scoped>
.taskItem{
    display: flex;
    justify-content: flex-start;
    width: 100%;    
    flex-flow: column nowrap;    
    align-items: flex-start;
    border-bottom: 1px solid #eee;
    padding: 0.2rem 3%;
    background-color: #fff;
    border-radius: 6px;
    margin-bottom: 4px;

    overflow: hidden;

    .iconState{
        width: 40px;
        position: absolute;
        margin-top: -8px;
        margin-left: -12px;
    }

    .item_title{
        display: flex;
        width: 100%;

        .docType{
            position: relative;    /*绝对定位*/
            height: 30px;
            padding-top: 12px;
            text-align: center;
            width: 74px;
            /* background-color: #FF5722;*/
            color: #fff;
            font-size: 13px;


            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            left: -38px;
            top: -14px;
             background-color:#3f8aefc2; 
             background-color: #004e9b;
            color:#fff;
            font-family: '黑体';
            
        }

        .title{
            font-size:17px;        
            /* margin-top: -34px; */
            /* padding-left: 24px; */
            margin-bottom: 4px;
            width: 200px;
            flex-grow: 1;
            margin-left: 23px;

        }

        .rightState{
            width: 70px;
              
            .stateTag{
                border-radius: 4px;
                background-color: rgb(224,230,246);
                color:#004e9b;
                /*color:rgb(104,131,226);*/
                overflow: hidden;
                width: 70px;
                white-space: nowrap;
                text-overflow: ellipsis;
                font-size: 12px;
                text-align: center;
                padding-top: 4px;
                padding-bottom: 4px;
                padding:4px;
            }
        }
        
    }
    

    .items{
        margin-top: -2px;
        display: flex;
        width: 100%;

        .itemsLeft{
            width: 100px;
            flex-grow: 1;
        }
        .itemRight{
            width: 80px;
            text-align: right;
          
        }
    }

    .item_info{
        


        margin-top: 0.15rem;
        display: flex;
        flex-flow: row nowrap;        
        justify-content: space-between;        
        align-items: center;
        width: 100%;
        padding-left: 20px;
        .user{
            font-size: 12px;
            color: #878787;
        }
    }
}
</style>